<template>
  <view style="position: absolute;" class="page">
	  <view class="txt">
		<text class="t0">选择入园日期</text>
		<text class="t1">2024.09</text>
	  </view>
    <uni-card style="padding: 0px" class="c0">
		<view style="display: flex; flex-wrap: wrap;">
			<buttonData v-for="(btn, index) in 21" 
				:day="getDay(index%30+1)"
				:week="getWeek(index)"
				:info="getInfo(index)"
				:key="index" 
				:class="{active: activeIndex == index}" 
				@click="handleButtonClick(index)">
			</buttonData>
		</view>
    </uni-card><br>
	
    <view>
      <text class="t00">选择入园时间段</text>
    </view>
    <uni-card class="c2">
      <view>
        <uni-data-checkbox class="checklist-text1" multiple max=1 selected-color="#8DCB6D" mode="tag" v-model="value1" :localdata="range1[[value%7]]" @change="c2"></uni-data-checkbox>
      </view>
    </uni-card>
    <view class="b1b">
		<navigator url="/pages/tuantiyuyue/tuantiyuyue">
			<button class="b1"><text class="t2">时段确认</text></button>
		</navigator>
      
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import buttonData from '/pages/button/button.vue'

let activeIndex = ref(null);
let currentDate = new Date().toLocaleDateString().split('/');
let getDay = function(index){
	return index<10 ? '0' + index : '' + index;
}
let getWeek = function(index){
	let weekDay = ['周日','周一','周二','周三','周四','周五','周六'];
	return weekDay[index%7];
}
let getInfo = function(index){
	if(false){
		return '\n';
	}
	let Info = ['已约满','','','','','闭馆',''];
	return Info[index%7];
}

let value = ref('value')
let value1 = ref('value')
let type = 1;
let ch1 = 0;
let ch2 = 0;

let handleButtonClick = function(index) {
	value.value = index;
	value1.value=[];
	ch2=0;
	ch1=value.length;
    activeIndex.value = index; 
}

let hs = function (data) {
  data++;
  let str = '2024年9月' + data + '日'
  return str;
}

let c1 = function (){
  value1.value=[];
  ch2=0;
  ch1=value.length;
}
let c2 = function (){
  ch2=value1.value.length;
}

let timeInfo = {
	date: '',
	time: '',
	type: 1
}


onLoad((options) => {
		type = options.type;
	})

let range1 = ref([[],
  [
    {"value": "09:00-11:00", "text": "09:00-11:00 ｜已约满", "disable": true},
    {"value": "11:00-13:30", "text": "11:00-13:30 ｜已约满", "disable": true},
    {"value": "13:30-16:00", "text": "13:30-16:00 ｜余 4"}],
  [
    {"value": "09:00-11:00", "text": "09:00-11:00 ｜已约满", "disable": true},
    {"value": "11:00-13:30", "text": "11:00-13:30 ｜余 3"},
    {"value": "13:30-16:00", "text": "13:30-16:00 ｜余 4"}],
  [
    {"value": "09:00-11:00", "text": "09:00-11:00 ｜余 2"},
    {"value": "11:00-13:30", "text": "11:00-13:30 ｜余 3"},
    {"value": "13:30-16:00", "text": "13:30-16:00 ｜余 4"}],
  [
    {"value": "09:00-11:00", "text": "09:00-11:00 ｜余 1",},
    {"value": "11:00-13:30", "text": "11:00-13:30 ｜余 5"},
    {"value": "13:30-16:00", "text": "13:30-16:00 ｜已约满", "disable": true}],
  [],
  [
    {"value": "09:00-11:00", "text": "09:00-11:00 ｜已约满", "disable": true},
    {"value": "11:00-13:30", "text": "11:00-13:30 ｜余 2"},
    {"value": "13:30-16:00", "text": "13:30-16:00 ｜已约满", "disable": true}],
  ])
</script>

<style>
.active{
	color: #fff;
	background-color: #8DCB6D;
}

.checklist-text1{
  font-family: PingFangSC-Regular;
  font-size: 20px;
  color: #6B6B6B;
  letter-spacing: -1px;
}
.b1b {
  position: relative;
  margin-top: 60px;
}

.t2 {
  width: 68px;
  height: 24px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 17px;
  color: #FFFFFF;
}

.b1 {
  width: 351px;
  height: 45px;
  background: #8DCB6D;
  border-radius: 25px;
  justify-content: center;
  align-items: center;
}

.c0 {
  top: 15px;
  height: 245px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 5%;
}

.c2 {
  top: -5px;
  border-radius: 5%;
}

.row {
  top: 15px;
}

.t0 {
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  margin-left: 15px;
  align-self: flex-start;
}

.t00 {
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  margin-left: 15px;
}

.t1 {
  font-family: PingFangSC-Medium;
  font-weight: 600;
  font-size: 15px;
  color: #000000;
  align-self: flex-end;
  margin-right: 15px;
}

.txt{
	display: flex;
	justify-content: space-between;
	margin-bottom: -20px;
	margin-top: 10px;
}
</style>